<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <title>Title</title>

    <script type="text/javascript">
        $(document).ready(function () {
            $("input").click(function () {
                //$(".div_1").animate({left: '150px'}, 2000, "linear");
                //$(".div_2").animate({left: '150px'}, 2000, "swing");

                let div = $(".div_1");
                // div.animate({left: '150px'}, "slow");
                // div.animate({bottom: '-150px'}, "slow");
                // div.animate({left: '0px'}, "slow");
                // div.animate({top: '0px'}, "slow");

            })
        })

    </script>
</head>
<body>
<input type="button" value="开始动画">
<div style="background-color: #c3c3c3">
    <div class="div_1" style="width: 100px;height: 100px;background-color: burlywood; position: relative"></div>
</div>
<div>
    <div class="div_2"
         style="width: 100px;height: 100px;background-color: red; position: relative; display: none"></div>
</div>
</body>
</html>